<script setup lang="ts">
import type { Map } from 'leaflet'
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import L from 'leaflet'
const bounds = L.latLngBounds([0, 0], [-66.5, 90])

const mapRef = ref<HTMLDivElement>()
const map = ref<Map>()

const { t } = useI18n()
onMounted(() => {
  if (!mapRef.value) return
  const tilelayer = new L.TileLayer('https://yuanshen.site/tiles_test/{z}/ppp{x}_{y}.jpg', {
    bounds,

  })
  const newMap = L.map(mapRef.value, {
    zoom: 5,
    center: [-35, 45],
    maxZoom: 8,
    minZoom: 3,
    zoomControl: false,
    layers: [tilelayer],
  })
  map.value = newMap
})
</script>

<template>
  <div ref="mapRef" class="map h-100vh dark:bg-black"></div>
  <span class="fixed top-6 left-6 dark:text-white z-400">{{ t("intro.whats-your-name") }}</span>
</template>
